<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">-->
<div id="work_top_window" style="z-index:101;position:absolute;width:100%;height:70px;background-color: #f9f9f9;border-bottom: 1px solid rgba(94, 94, 94, 0.767);">
    <!--项目名称part-->
    <div style="float: left;">
        <div style="font-size: 18px;margin-left: 20px;">
            <div class="return_btn" onclick="location.href='{:url('index/getSingleQuesBank')}'" style="cursor: pointer; float:left;margin:3px 15px 0 0;background-image:linear-gradient(#ffffff,#eeeeee);padding:0 15px;">
                <img style="width:24px;height: 24px;" src="__IMG__/return.png">
            </div>
            <span style="color: #838282;">返回题库</span>
        </div>
    </div>

    <!--自动保存提示语句part-->
    <div id="auto_save" style="position: absolute;top:5px;right:60px;color: #838282;font-weight: 300;">
        [修改将自动保存]
    </div>



    <!-- <div style="height: 75px;text-align: center;padding: 30px 0;font-size: 22px;"> -->
    <div style="font-size: 22px;padding-top: 20px;text-align: center;width: 100%;font-weight: 350;">
        <span>&nbsp;{$ques_info['ques_type']}&nbsp;|&nbsp;{$ques_info['content']}</span>
    </div>
    <!-- </div> -->



</div>

<div id="ques_explanation" style="margin-top:100px;font-size: 17px;padding: 0 300px;">
    {$ques_info['explanation'] | raw}
</div>


<div id="answer_window_vue" style="float: right;margin-right: 350px;">
    <span @click="showAnswer" style="cursor: pointer;">
        <!--红色感叹号图标-->
        <!--<svg t="1587690063179" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1150" width="24" height="24"><path d="M512 128c212 0 384 172 384 384S724 896 512 896 128 724 128 512s172-384 384-384m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z" p-id="1151" fill="#d81e06"></path><path d="M480 704h64v64h-64z m0-448h64v384h-64z" p-id="1152" fill="#d81e06"></path></svg>
        -->
        <span style="
    padding: 0 20px;
    border: 1px solid #409eff;
    border-radius: 30px;
    color: #409eff;
    background-color: white;
    font-weight: bold;
        ">点此查看解析</span>
    </span>


    <div id="answer_window" v-show="isShowAnswer" style="display:none;position: absolute;right: 200px;z-index: 110;background-color:white;width:260px;min-height:55px;box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);">
        <div style="padding: 10px 10px;background: linear-gradient(0deg, #fafafa, #f8f8f8);box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);">解析
            <span @click="closeAnswer" style="float:right;cursor: pointer;font-size: 12px;color: #a2a2a2;">×关闭解析</span>
        </div>

        <div style="max-height:250px;overflow:auto;">
            <!--点击查看解析按钮后ajax查询，显示在此区域-->
            <div v-if="isShowAnswerContent" style="font-size: 20px;margin: 10px; ">
                {{showAnswerContent}}
            </div>
        </div>

        <div style="background: #cccccc;height: 1px;margin: 5px 10px;"></div>

        <div id="self_rating" style="padding: 10px 10px;">
            <el-form ref="form" :model="form">
                <el-form-item label="自评分数">
                    <el-rate v-model="form.ratings" show-text style="padding: 10px;">
                    </el-rate>
                </el-form-item>
                <el-form-item label="自我感悟">
                    <el-input type="textarea" autosize placeholder="请输入感悟或评价" v-model="form.comments">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交自评</el-button>
                    <!--<el-button>取消</el-button>-->
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>


<script>
    $('#header_ques').css('border-bottom', 'solid 2px #000000');
    $('#header_ques').css('font-weight', 'bold');

    setTimeout(function() {
        var record_flags = JSON.parse('{:json_encode($record_flags)}');
        record_flags.forEach(function(item) {
            var preparedId = item.prepared_id;
            // console.log(preparedId)
            $('#flag_importance_' + preparedId).show();
        });
    }, 500);
</script>

<script type="module">
    var vm = new Vue({ el: '#answer_window_vue', data(){ return { /*RatingOptions: [{ value: '0', label: '0' }, { value: '20', label: '20' }, { value: '40', label: '40' }, { value: '60', label: '60' }, { value: '80', label: '80' },{ value: '100', label: '100'
    }],*/ form: { ratings: null, comments: '' }, isShowAnswer: false, isShowAnswerContent: false, showAnswerContent: '' } }, methods: { closeAnswer(){ this.isShowAnswer = false; }, showAnswer(){ var axiosAjax = axios.create({ baseURL: '__PUBLIC__/index/',
    transformRequest: [function(data) { data = Qs.stringify(data); return data; }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); var params = { quesId: '{$ques_info["id"]}', userId: '{$_COOKIE["user"]}', }; axiosAjax.post('Quescontroller/hasAnsweredQues',
    params).then(res => { console.log(res); if((res.data).has == false){ this.$message.error('请作答完毕后再查看解析~'); return; } params = { quesId: '{$ques_info["id"]}' }; axiosAjax.post('Quescontroller/getQuesAnswer', params).then(response => { console.log(response);
    this.showAnswerContent = response.data; params = { quesId: '{$ques_info["id"]}', userId: '{$_COOKIE["user"]}', }; axiosAjax.post('Quescontroller/getQuesSelfAssessment', params).then(res => { console.log(res); if(res.data != null) { this.form.ratings
    = res.data.ratings; this.form.comments = res.data.comments; } this.isShowAnswerContent = true; this.isShowAnswer = true; }); }).catch(function(error) { console.log(error); }); }); }, onSubmit(){ if(/^[ ]+$/.test(this.form.comments) || this.form.comments
    == "" || this.form.comments == null || this.form.ratings == 0){ this.$message.error('请输入评分及自我感悟'); return; } var axiosAjax = axios.create({ baseURL: '__PUBLIC__/index/', transformRequest: [function(data) { data = Qs.stringify(data); return data; }],
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); var params = { quesId: '{$ques_info["id"]}', userId: '{$_COOKIE["user"]}', ratings: this.form.ratings, comments: this.form.comments }; axiosAjax.post('Quescontroller/updateQuesSelfAssessment',
    params).then(response => { console.log(response); this.$message.success('自评已成功提交~'); /* this.form.ratings = response.data.ratings; this.form.comments = response.data.comments;*/ }).catch(function(error) { console.log(error); }); } } })

</script>